Okay.
Let's go ahead and talk about scrolling frames.
This is a neat GUI object that allows us, as the name suggests, to scroll through it.
So let's go ahead and add a scrolling frame into our GUI.
And it's literally just a regular frame with some extra features to allow us to scroll through it.
And you can see that there's a scrolling bar right here.
So we have all these standard properties that a normal frame would have.
And then we have some additional properties specifically for scrolling.
Now we have some properties here such as automatic canvas size.
These image properties relate to the scrolling bar itself, so you can set an image for the middle of
the scrolling bar at the bottom and the top.
That's what those properties are for, and we're not going to worry about those for now.
But the main thing we want to kind of focus on is the canvas size, which represents the entire size
of this scrolling thing.
So basically right now the canvas size is set to two, which is two times or twice the size of this
frame currently.
So you can imagine basically two of these frames doubled up inside of here that we're able to scroll
through.
And we can grab the scrolling bar to scroll up and down.
It's also moving the GUI at the same time, which is a little funky, but you can see the scrolling
bar moving and down here currently defines that.
The scale is set to two.
If we set it to zero, which means there is currently no canvas size, as you can see, there is no
scrolling bar.
If I set it to one, well, that's going to be an additional size here that we can scroll through.
And of course you can define it as offset as well.
But most of the time people have it defined as scale.
We are also able to change the thickness of the scrolling bar down here with the scroll bar thickness
property.
It's in pixels, so if I want my scroll bar to be thinner, I can set it to eight.
So now it's eight pixels and width.
And then we're also able to define if we can scroll in both the x and y direction.
So right now it's set to yes we can scroll in both the x and y direction.
But currently the x is set to zero.
So there's no scroll bar on the bottom.
But if I set the scale to two now we have a scroll bar on both the top and the bottom.
So we can scroll this way and we can scroll this way.
These other properties, called horizontal scroll bar, inset and vertical scroll bar inset, determines
if we would like to account for the size of our scrolling bars.
So since the size of them is eight pixels, if we were to set this to always, then that means we're
going to account for an eight pixel inset, because that's what the size of our scrolling bars are.
If we set it to scroll bar, that means that inset is only going to exist when a scroll bar appears,
and the way that you can get a scrolling frame to resize itself as more and more elements are placed
inside of it, is by using the property automatic canvas size.
If you want to create a list of objects that you can scroll downwards in, then you would have this
automatic canvas size set to the y axis, and then by default you would set these properties to zero.
And then let me go ahead and adjust the scrolling direction to be only on the y axis.
And let me go ahead and start adding some objects in here, like another frame.
And let me change the color of this so we can see it.
So there's our green frame.
If I duplicate this and start positioning stuff around inside of the scrolling frame, if I move it
down and around.
And then let me try and reset this to have an automatic canvas size.
And it's currently not working.
And that's likely because we are not using a UI constraint.
We're going to be looking at that in the next lecture.
But let me actually just go ahead and increase the canvas size manually.
So there we go.
As we scroll down, you can see the position of these frames on different areas in our canvas.
So let me go ahead and duplicate that and try to like move it down here if it will let me.
It's being a little bit funky, but as you can see we can adjust the position of these different frame
objects at different points inside of our scrolling frame and as we scroll through.
We can see those different elements.
Now, if we were to set, let me try to find the property.
Clip the sentence to false.
It's going to show all of the objects in the scrolling frame, even when they go beyond the border of
our scrolling frame.
So most of the time, you'll likely have this set to true.
I'm not sure why you would have it set to false, because it looks a little odd, but that is basically
the purpose of the scrolling frame.
It's to store stuff that you can scroll through.
So if you have tons of objects that just wouldn't fit on the screen, normally you can slap it in a
scrolling frame and give the players the ability to scroll through all of those objects.
So now that we have a good idea of what scrolling frames are, we're now going to take a look at UI
constraints and how we can use them to improve the functionality and visual style of our GUI objects.
There are some UI constraints that specifically affect scrolling frames that we want to go ahead and
take a look at.